<template>
  <div>
    <ul>
      <li>姓&emsp;名：<input v-model="name" /></li>
      <li>年&emsp;龄：<input v-model="age" /></li>
      <li>性&emsp;别：<input v-model="sex" /></li>
      <li>手机号：<input v-model="tel" /></li>
      <li>技&emsp;能：<input v-model="skill" /></li>
      <!-- <li>爱&emsp;好：<input v-model="hob" /></li> -->
      <li><button @click="addPerson">添加</button></li>
    </ul>

    <div class="finding">
      <input
        style="width: 200px; height: 35px"
        type="text"
        placeholder="姓名"
        v-model="peoples"
      />

      <button style="width: 60px; height: 35px" @click="clickfind">查询</button>
    </div>

    <table>
      <thead>
        <tr>
          <td>姓名</td>
          <td>年龄</td>
          <td>性别</td>
          <td>手机号</td>
          <td>技能</td>
          <!-- <td>爱好</td> -->
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in arr" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.sex }}</td>
          <td>{{ item.tel }}</td>
          <td>{{ item.skill }}</td>
          <!-- <td>{{item.hob}}</td> -->
          <td>
            <button @click="arr.splice(index, 1)">删除</button
            ><button @click="Edit(index)">编辑</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-show="motai" :class="{ motai }">
      <dl>
        <dd class="vals">姓&emsp;名：<input v-model="addName" /></dd>
        <dd class="vals">年&emsp;龄：<input v-model="addAge" /></dd>
        <dd class="vals">性&emsp;别：<input v-model="addSex" /></dd>
        <dd class="vals">手机号：<input v-model="addTel" /></dd>
        <dd class="vals">技&emsp;能：<input v-model="addSkill" /></dd>
        <!-- <dd class="vals">爱&emsp;好：<input v-model="addHob" /></dd> -->
        <dd class="vals btns">
          <button @click="saveEdit" style="background-color: #13bc73">
            保存</button
          ><button @click="motai = false" style="background-color: #89959b">
            取消
          </button>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    clickfind() {
      var peoples = this.peoples;
      if (peoples) {
        this.arr = [
          this.arr.find((value) => value.name.indexOf(this.peoples) !== -1),
        ];
      }
    },

    addPerson() {
      if ((this.name, this.age, this.sex, this.tel, this.skill) === "") {
        alert("请输入您的信息");
      } else {
        this.arr.push({
          name: this.name,
          age: Number(this.age),
          sex: this.sex,
          tel: Number(this.tel),
          skill: this.skill,
          // hob:this.hob
        });
      }
      this.name = this.age = this.sex = this.tel = this.skill = "";
    },

    Edit(i) {
      this.motai = true;

      this.index = i;
      console.log(this.index);
      let newArr = this.arr[i];
      this.addName = newArr.name;
      this.addAge = newArr.age;
      this.addSex = newArr.sex;
      this.addTel = newArr.tel;
      this.addSkill = newArr.skill;
      // this.addHob=newArr.hob
      // console.log(this.arr.length);
      // console.log(this.arr[0]);
      // console.log(newArr);
    },

    saveEdit() {
      this.motai = false;

      this.arr[this.index] = {
        name: this.addName,
        age: this.addAge,
        sex: this.addSex,
        tel: this.addTel,
        skill: this.addSkill,
        // hob:this.addHob
      };
    },
  },

  data() {
    return {
      peoples: "",
      peoplesdate: "",

      motai: false,
      // fs:false,
      // tr:true,
      name: "",
      age: "",
      sex: "",
      tel: "",
      skill: "",
      // hob:[],

      addName: "",
      addAge: "",
      addSex: "",
      addTel: "",
      addSkill: "",
      // addHob:'',

      arr: [
        {
          name: "老顽童爷爷",
          age: 999999,
          sex: "神",
          tel: 18839444256,
          skill: "发明家",
          // hob:['赏花','游玩']
        },
      ],
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

ul {
  width: 800px;
  /* height: 500px; */
  margin: 50px auto;
}

li,
.vals {
  font-size: 24px;
  line-height: 40px;
  height: 40px;
}

li > input,
.vals input {
  border: 1px solid #ccc;
  outline: none;
  width: 200px;
  height: 30px;
  padding: 0 20px;
  font-size: 18px;
}

li > button {
  margin-left: 96px;
  width: 60px;
  height: 35px;
  font-size: 18px;
}

.finding {
  width: 800px;
  margin: 10px auto;
}

table {
  width: 800px;
  border-collapse: collapse;
  margin: 30px auto;
}

table td {
  border: 1px solid #242424;
  line-height: 35px;
  padding-left: 10px;
}

table td:last-child {
  position: relative;
  width: 175px;
}

table td button {
  width: 50px;
  height: 28px;
  font-size: 18px;
}

table td button:first-child {
  position: absolute;
  top: 3px;
  left: 25px;
  background-color: red;
  border: 1px solid #ccc;
  outline: none;
  cursor: pointer;
}

table td button:nth-child(2) {
  position: absolute;
  top: 3px;
  right: 25px;
  background-color: yellow;
  border: 1px solid #ccc;
  outline: none;
  cursor: pointer;
}

.motai {
  width: 500px;
  height: 290px;
  position: fixed;
  top: 115px;
  left: 1100px;

  background-color: skyblue;
}

dl {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20px 0;
}

.btns {
  display: flex;
  justify-content: space-around;

  width: 338px;
  margin-top: 20px;
}

.btns button {
  width: 50px;
  height: 30px;
  font-size: 20px;
  border: none;
  outline: none;
  color: #fff;
}

.btns button:active {
  color: #f60;
}
</style>
